<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>数据源管理</title>
    <link rel="stylesheet" href="./css/rules.css">
</head>

<body>
    <h1>数据源管理</h1>
    <div class="input-container">
        <form onsubmit="return validForm(this)"> 
            <label for="port-input">数据：</label>  
            <input name="id" type="text" id="port-input" placeholder="想查什么？">
            <button class="add-rule-btn" id="add-rule-btn">查询数据</button>
        </form>
    </div>

    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>捕获数据</th>
                <th>敏感词id</th>
            </tr>
        </thead>
        <tbody id="tbody"></tbody>
    </table>

    <script>
        window.onload = function () {
            loaddata(); // 加载数据
        }
        
        function loaddata() {
            fetch("/cgi-bin/data")
                .then(resp => resp.json())
                .then(data => {
                    console.log(data);
                    if (data.code == 0) {
                        updateTable(data.datas); // 更新表格
                    } else {
                        alert(data.msg);
                    }
                });
        }
        
        function updateTable(datas) {
            tbody.innerHTML = ""; // 清空原数据
            datas.forEach(item => {
                let tr = document.createElement("tr");
                let td1 = document.createElement("td");
                let td2 = document.createElement("td");
                let td3 = document.createElement("td");
    
                td1.innerText = item.id;
                td2.innerText = item.content;    // 捕获的数据
                td3.innerText = item.word_id;     // 敏感词等级id
    
                tr.append(td1, td2, td3);
                tbody.append(tr);
            });
        }
    
        function validForm(_form) {
            let form_data = {
                id: _form.id.value,
            };
    
            fetch("/cgi-bin/query", {
                method: "POST",
                body: JSON.stringify(form_data),
                headers: {
                    "Content-Type": "application/json;charset=utf-8"
                }
            })
            .then(resp => resp.json())
            .then(data => {
                if (data.code == 0) {
                    updateTable(data.datas); // 更新表格显示查询结果
                } else {
                    alert(data.msg);
                }
            });
            
            return false; // 阻止表单提交
        }
    </script>
</body>

</html>













<!-- 
<script>
    window.onload = function () {
        loaddata(); // 加载数据
    }
    function loaddata() {
        fetch("/cgi-bin/data")
            .then(resp => resp.json()).then(data => {
            console.log(data);
            if (data.code == 0) {
                data.datas.forEach(item => {
                    let tr = document.createElement("tr");
                    let td1 = document.createElement("td");
                    let td2 = document.createElement("td");
                    let td3 = document.createElement("td");

                    td1.innerText = item.id;
                    td2.innerText = item.content;    //捕获的数据
                    td3.innerText = item.word_id;   //敏感词id

                    tr.append(td1, td2, td3);

                    tbody.append(tr);
                });

            } else {
                alert(data.msg);
            }
        })
    }
    function validForm(_form) {
        let form_data = {
            id: _form.id.value,
        };
       // 便利数据
        fetch("/cgi-bin/data",{
                method: "GET",
                body: JSON.stringify(form_data),
                headers: {
                    "content-type": "application/json;charset=utf-8"
                }
            })
        return false;
    }
    


    // 查询数据
    function validForm(_form) {
        let form_data = {
            id: _form.id.value,
        };
    
        fetch("/cgi-bin/query",{
                method: "GET",
                body: JSON.stringify(form_data),
                headers: {
                    "content-type": "application/json;charset=utf-8"
                }
            })
        // .then(resp => resp.json()).then(data => {
        //     if (data.code == 0) {
        //         alert("新增成功");
        //         tbody.innerHTML = ""; // 清空原数据
        //         loaddata();
        //         _form.reset(); // 清空表单数据
        //     }
        // })
        return false;
    }
</script> -->